<template>
  <div class="smart-navigation-system">
    <!-- 左侧主导航 -->
    <div class="main-nav-sidebar" :class="{ 'collapsed': isCollapsed }">
      <!-- Logo区域 -->
      <div class="logo-section">
        <div class="logo">
          <el-icon><Grid /></el-icon>
          <span v-if="!isCollapsed">E3</span>
        </div>
        <el-button 
          text 
          @click="toggleCollapse" 
          class="collapse-btn"
        >
          <el-icon><component :is="isCollapsed ? 'Expand' : 'Fold'" /></el-icon>
        </el-button>
      </div>

      <!-- 搜索区域 -->
      <div class="search-section" v-if="!isCollapsed">
        <el-input
          v-model="searchQuery"
          placeholder="搜索"
          size="small"
          @focus="showSearchResults = true"
          @blur="hideSearchResults"
        >
          <template #prefix>
            <el-icon><Search /></el-icon>
          </template>
        </el-input>
        
        <!-- 搜索结果下拉 -->
        <transition name="search-dropdown">
          <div v-if="showSearchResults && searchResults.length > 0" class="search-results">
            <div
              v-for="result in searchResults"
              :key="result.id"
              class="search-result-item"
              @click="navigateToResult(result)"
            >
              <el-icon><component :is="result.icon" /></el-icon>
              <span>{{ result.title }}</span>
            </div>
          </div>
        </transition>
      </div>

      <!-- 主菜单 -->
      <div class="main-menu">
        <div
          v-for="item in mainMenuItems"
          :key="item.id"
          class="menu-item"
          :class="{ 'active': activeMainMenu === item.id }"
          @click="selectMainMenu(item)"
        >
          <div class="menu-icon">
            <el-icon><component :is="item.icon" /></el-icon>
          </div>
          <span v-if="!isCollapsed" class="menu-text">{{ item.title }}</span>
          <el-badge v-if="item.badge && !isCollapsed" :value="item.badge" class="menu-badge" />
        </div>
      </div>

      <!-- 收藏夹 -->
      <div class="favorites-section" v-if="!isCollapsed">
        <div class="section-title">
          <el-icon><Star /></el-icon>
          <span>收藏</span>
        </div>
        <div class="favorites-list">
          <div
            v-for="fav in favoriteItems"
            :key="fav.id"
            class="favorite-item"
            @click="navigateTo(fav.path)"
          >
            <el-icon><component :is="fav.icon" /></el-icon>
            <span>{{ fav.title }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 浮动子菜单区域 -->
    <div class="sub-menu-panel" v-if="currentSubMenus.length > 0 && !isCollapsed">
      <div class="sub-menu-header">
        <h3>{{ activeMainMenuTitle }}</h3>
        <el-button text @click="closeSubMenu">
          <el-icon><Close /></el-icon>
        </el-button>
      </div>
      
      <div class="sub-menu-content">
        <div
          v-for="(column, columnIndex) in subMenuColumns"
          :key="columnIndex"
          class="sub-menu-column"
        >
          <div
            v-for="category in column"
            :key="category.id"
            class="sub-menu-category"
          >
            <div class="category-title">{{ category.title }}</div>
            <div class="category-items">
              <div
                v-for="item in category.items"
                :key="item.id"
                class="sub-menu-item"
                @click="navigateToSubMenu(item.path)"
              >
                <el-icon v-if="item.icon"><component :is="item.icon" /></el-icon>
                <span>{{ item.title }}</span>
                <el-tag v-if="item.badge" size="small" :type="item.badgeType">
                  {{ item.badge }}
                </el-tag>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 主内容区域 -->
    <div class="main-content" :class="{ 'expanded': isCollapsed || currentSubMenus.length === 0 }">
      <!-- 顶部工具栏 -->
      <div class="top-toolbar">
        <div class="toolbar-left">
          <el-button text @click="toggleCollapse">
            <el-icon><component :is="isCollapsed ? 'Expand' : 'Fold'" /></el-icon>
          </el-button>
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="crumb in breadcrumbs" :key="crumb.path">
              {{ crumb.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <div class="toolbar-center">
          <el-input
            v-model="globalSearchQuery"
            placeholder="全局搜索功能、数据、操作..."
            size="small"
            style="width: 300px"
          >
            <template #prefix>
              <el-icon><Search /></el-icon>
            </template>
          </el-input>
        </div>

        <div class="toolbar-right">
          <el-button text>
            <el-icon><Bell /></el-icon>
            <el-badge :value="3" class="notification-badge" />
          </el-button>
          <el-button text @click="showNavigationSettings">
            <el-icon><Setting /></el-icon>
          </el-button>
          <el-dropdown>
            <div class="user-info">
              <el-avatar :size="32" src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png" />
              <span>超级管理员</span>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>个人中心</el-dropdown-item>
                <el-dropdown-item>系统设置</el-dropdown-item>
                <el-dropdown-item divided>退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>

      <!-- 内容区域 -->
      <div class="content-area">
        <router-view v-slot="{ Component }">
          <transition name="page-fade" mode="out-in">
            <component :is="Component" v-if="Component" :key="$route.fullPath" />
          </transition>
        </router-view>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'
import {
  Grid, Expand, Fold, Search, Star, Close, Bell, Setting,
  Files, ShoppingBag, ShoppingCart, User, Box, Money,
  Shop, DataAnalysis, Setting as SettingIcon, Key
} from '@element-plus/icons-vue'
import { menuData } from '@/config/menu'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'

const router = useRouter()
const route = useRoute()

// 响应式数据
const isCollapsed = ref(false)
const searchQuery = ref('')
const globalSearchQuery = ref('')
const showSearchResults = ref(false)
const activeMainMenu = ref('')
const currentSubMenus = ref([])

// 从公共菜单配置生成主菜单数据
const mainMenuItems = computed(() => {
  return menuData.map(item => ({
    id: item.path.replace('/', '') || 'dashboard',
    title: item.title,
    icon: item.icon,
    path: item.path,
    badge: item.badge || '',
    children: item.children || []
  }))
})

// 从公共菜单配置生成子菜单数据
const subMenuData = computed(() => {
  const data = {}
  if (menuData && Array.isArray(menuData)) {
    menuData.forEach(item => {
      if (item && item.children && item.children.length > 0) {
        const menuId = item.path.replace('/', '') || 'dashboard'
        data[menuId] = [{
          id: menuId,
          title: item.title,
          items: item.children.map(child => ({
            id: child.path.replace('/', '').replace(/\//g, '-'),
            title: child.title,
            path: child.path,
            icon: child.icon,
            badge: child.badge || ''
          }))
        }]
      }
    })
  }
  return data
})

// 原有的硬编码子菜单数据（保留作为备用）
const legacySubMenuData = {
  files: [
    {
      id: 'system-files',
      title: '系统档案',
      items: [
        { id: 'timezone', title: '时区档案', path: '/files/timezone', icon: 'Clock' },
        { id: 'region', title: '区域', path: '/files/region', icon: 'Location' },
        { id: 'attribute-settings', title: '属性名称参数设置', path: '/files/attribute-settings', icon: 'Setting' },
        { id: 'image-center', title: '图片中心', path: '/files/image-center', icon: 'Picture' },
        { id: 'file-center', title: '文件中心', path: '/files/file-center', icon: 'Folder' },
        { id: 'material-center', title: '素材中心', path: '/files/material-center', icon: 'Collection' },
        { id: 'learning-stats', title: '商学院学习记录统计', path: '/files/learning-stats', icon: 'DataAnalysis' },
        { id: 'learning-detail', title: '商学院学习明细分析', path: '/files/learning-detail', icon: 'TrendCharts' },
        { id: 'split-info', title: '分账信息', path: '/files/split-info', icon: 'Money' },
        { id: 'common-phrases', title: '常用片语', path: '/files/common-phrases', icon: 'ChatDotSquare' },
        { id: 'image-category', title: '图片类别', path: '/files/image-category', icon: 'Grid' },
        { id: 'document-number', title: '单据编号维护', path: '/files/document-number', icon: 'Document' }
      ]
    },
    {
      id: 'supplier-files',
      title: '供货商档案',
      items: [
        { id: 'supplier-category', title: '供货商类别', path: '/files/supplier-category', icon: 'Grid' },
        { id: 'supplier', title: '供货商', path: '/files/supplier', icon: 'Shop' }
      ]
    },
    {
      id: 'customer-files',
      title: '客户档案',
      items: [
        { id: 'channel-category', title: '渠道类别', path: '/files/channel-category', icon: 'Grid' },
        { id: 'channel', title: '渠道', path: '/files/channel', icon: 'Connection' },
        { id: 'customer-category', title: '客户类别', path: '/files/customer-category', icon: 'Grid' },
        { id: 'customer', title: '客户', path: '/files/customer', icon: 'User' },
        { id: 'customer-attr', title: '客户属性1x', path: '/files/customer-attr', icon: 'Setting' }
      ]
    },
    {
      id: 'warehouse-attributes',
      title: '仓库附加属性',
      items: [
        { id: 'warehouse-attr1', title: '仓库属性1x', path: '/files/warehouse-attr1', icon: 'Setting' },
        { id: 'warehouse-attr2', title: '仓库属性2', path: '/files/warehouse-attr2', icon: 'Setting' },
        { id: 'warehouse-attr3', title: '仓库属性3', path: '/files/warehouse-attr3', icon: 'Setting' },
        { id: 'warehouse-attr4', title: '仓库属性4', path: '/files/warehouse-attr4', icon: 'Setting' },
        { id: 'warehouse-attr5', title: '仓库属性5', path: '/files/warehouse-attr5', icon: 'Setting' },
        { id: 'warehouse-attr6', title: '仓库属性6', path: '/files/warehouse-attr6', icon: 'Setting' },
        { id: 'warehouse-category', title: '仓库类别', path: '/files/warehouse-category', icon: 'Grid' },
        { id: 'storage-location', title: '库位', path: '/files/storage-location', icon: 'Location' },
        { id: 'warehouse', title: '仓库', path: '/files/warehouse', icon: 'House' },
        { id: 'warehouse-structure', title: '仓库结构图', path: '/files/warehouse-structure', icon: 'TrendCharts' },
        { id: 'storage-position', title: '存放位置', path: '/files/storage-position', icon: 'Location' }
      ]
    },
    {
      id: 'sales-files',
      title: '销售档案',
      items: [
        { id: 'carrier-payment', title: '承运付款方式', path: '/files/carrier-payment', icon: 'Money' },
        { id: 'carrier', title: '承运商', path: '/files/carrier', icon: 'Truck' },
        { id: 'salesperson', title: '业务员', path: '/files/salesperson', icon: 'User' },
        { id: 'cashier-method', title: '收银方式', path: '/files/cashier-method', icon: 'CreditCard' },
        { id: 'operating-form', title: '经营形式', path: '/files/operating-form', icon: 'Shop' },
        { id: 'operating-nature', title: '经营性质', path: '/files/operating-nature', icon: 'OfficeBuilding' },
        { id: 'discount-rate', title: '扣率设定单', path: '/files/discount-rate', icon: 'Discount' },
        { id: 'mall-activities', title: '商场活动', path: '/files/mall-activities', icon: 'Promotion' },
        { id: 'tailor', title: '量体师', path: '/files/tailor', icon: 'User' },
        { id: 'order-fair', title: '订货会', path: '/files/order-fair', icon: 'Calendar' }
      ]
    },
    {
      id: 'financial-files',
      title: '财务档案',
      items: [
        { id: 'adjustment-type', title: '应收应付调整类型', path: '/files/adjustment-type', icon: 'Money' },
        { id: 'expense-account', title: '费用科目', path: '/files/expense-account', icon: 'Wallet' },
        { id: 'payment-type', title: '收付款类型', path: '/files/payment-type', icon: 'CreditCard' },
        { id: 'payment-method', title: '收付款方式', path: '/files/payment-method', icon: 'Money' },
        { id: 'invoice-type', title: '发票类型', path: '/files/invoice-type', icon: 'Document' },
        { id: 'bank-account', title: '银行帐户', path: '/files/bank-account', icon: 'CreditCard' },
        { id: 'transfer-type', title: '转帐类型', path: '/files/transfer-type', icon: 'Switch' },
        { id: 'attendance-item', title: '考勤项目', path: '/files/attendance-item', icon: 'Clock' },
        { id: 'accounting-object', title: '核算对象', path: '/files/accounting-object', icon: 'DataAnalysis' },
        { id: 'accounting-month', title: '会计月自定义', path: '/files/accounting-month', icon: 'Calendar' },
        { id: 'tax-type', title: '税种', path: '/files/tax-type', icon: 'Money' },
        { id: 'tax-rate', title: '税率', path: '/files/tax-rate', icon: 'Percentage' },
        { id: 'tax-rate-rule', title: '税率取值规则', path: '/files/tax-rate-rule', icon: 'Setting' },
        { id: 'accounting-policy', title: '会计政策', path: '/files/accounting-policy', icon: 'Document' },
        { id: 'organization', title: '组织档案', path: '/files/organization', icon: 'OfficeBuilding' },
        { id: 'accounting-system', title: '会计核算体系', path: '/files/accounting-system', icon: 'DataAnalysis' },
        { id: 'currency', title: '币种资料', path: '/files/currency', icon: 'Money' },
        { id: 'currency-denomination', title: '货币面值', path: '/files/currency-denomination', icon: 'Money' },
        { id: 'exchange-rate', title: '汇率管理', path: '/files/exchange-rate', icon: 'TrendCharts' }
      ]
    }
  ],
  products: [
    {
      id: 'product-management',
      title: '商品管理',
      items: [
        { id: 'product-list', title: '商品列表', path: '/products/list', icon: 'List' },
        { id: 'product-category', title: '商品分类', path: '/products/category', icon: 'Grid' },
        { id: 'product-attributes', title: '商品属性', path: '/products/attributes', icon: 'Setting' },
        { id: 'product-brands', title: '品牌管理', path: '/products/brands', icon: 'Star' },
        { id: 'product-specs', title: '规格管理', path: '/products/specs', icon: 'Setting' },
        { id: 'product-prices', title: '价格管理', path: '/products/prices', icon: 'Money' }
      ]
    }
  ],
  purchase: [
    {
      id: 'purchase-management',
      title: '采购管理',
      items: [
        { id: 'purchase-orders', title: '采购订单', path: '/purchase/orders', icon: 'Document' },
        { id: 'purchase-receipts', title: '采购入库', path: '/purchase/receipts', icon: 'Box' },
        { id: 'purchase-returns', title: '采购退货', path: '/purchase/returns', icon: 'RefreshLeft' },
        { id: 'supplier-management', title: '供应商管理', path: '/purchase/suppliers', icon: 'Shop' },
        { id: 'purchase-analysis', title: '采购分析', path: '/purchase/analysis', icon: 'TrendCharts' }
      ]
    }
  ],
  distribution: [
    {
      id: 'distribution-management',
      title: '分销管理',
      items: [
        { id: 'distributors', title: '分销商管理', path: '/distribution/distributors', icon: 'User' },
        { id: 'distribution-orders', title: '分销订单', path: '/distribution/orders', icon: 'Document' },
        { id: 'distribution-settlements', title: '分销结算', path: '/distribution/settlements', icon: 'Money' },
        { id: 'distribution-reports', title: '分销报表', path: '/distribution/reports', icon: 'DataAnalysis' }
      ]
    }
  ],
  inventory: [
    {
      id: 'warehouse-management',
      title: '仓库管理',
      items: [
        { id: 'warehouse-list', title: '仓库列表', path: '/inventory/warehouse', icon: 'House' },
        { id: 'warehouse-category', title: '仓库类别', path: '/inventory/warehouse-category', icon: 'Grid' },
        { id: 'storage-location', title: '库位管理', path: '/inventory/storage-location', icon: 'Location' },
        { id: 'warehouse-structure', title: '仓库结构图', path: '/inventory/warehouse-structure', icon: 'TrendCharts' },
        { id: 'stock-check', title: '库存盘点', path: '/inventory/stock-check', icon: 'List' },
        { id: 'stock-transfer', title: '库存调拨', path: '/inventory/stock-transfer', icon: 'Switch' }
      ]
    },
    {
      id: 'stock-management',
      title: '库存管理',
      items: [
        { id: 'stock-query', title: '库存查询', path: '/inventory/stock-query', icon: 'Search' },
        { id: 'stock-alerts', title: '库存预警', path: '/inventory/stock-alerts', icon: 'Warning' },
        { id: 'stock-analysis', title: '库存分析', path: '/inventory/stock-analysis', icon: 'TrendCharts' }
      ]
    }
  ],
  finance: [
    {
      id: 'accounting',
      title: '会计核算',
      items: [
        { id: 'accounts', title: '科目管理', path: '/finance/accounts', icon: 'Wallet' },
        { id: 'vouchers', title: '凭证管理', path: '/finance/vouchers', icon: 'Document' },
        { id: 'ledger', title: '总账', path: '/finance/ledger', icon: 'DataAnalysis' },
        { id: 'sub-ledger', title: '明细账', path: '/finance/sub-ledger', icon: 'List' }
      ]
    },
    {
      id: 'financial-reports',
      title: '财务报表',
      items: [
        { id: 'balance-sheet', title: '资产负债表', path: '/finance/balance-sheet', icon: 'DataAnalysis' },
        { id: 'profit-loss', title: '利润表', path: '/finance/profit-loss', icon: 'TrendCharts' },
        { id: 'cash-flow', title: '现金流量表', path: '/finance/cash-flow', icon: 'Money' }
      ]
    }
  ],
  stores: [
    {
      id: 'store-management',
      title: '门店管理',
      items: [
        { id: 'store-list', title: '门店列表', path: '/stores/list', icon: 'Shop' },
        { id: 'store-staff', title: '门店员工', path: '/stores/staff', icon: 'User' },
        { id: 'store-performance', title: '门店业绩', path: '/stores/performance', icon: 'TrendCharts' },
        { id: 'store-inventory', title: '门店库存', path: '/stores/inventory', icon: 'Box' }
      ]
    }
  ],
  members: [
    {
      id: 'member-management',
      title: '会员管理',
      items: [
        { id: 'member-list', title: '会员列表', path: '/members/list', icon: 'User' },
        { id: 'member-levels', title: '会员等级', path: '/members/levels', icon: 'Star' },
        { id: 'member-points', title: '积分管理', path: '/members/points', icon: 'Coin' },
        { id: 'member-analysis', title: '会员分析', path: '/members/analysis', icon: 'TrendCharts' }
      ]
    }
  ],
  reports: [
    {
      id: 'business-reports',
      title: '业务报表',
      items: [
        { id: 'sales-reports', title: '销售报表', path: '/reports/sales', icon: 'TrendCharts' },
        { id: 'inventory-reports', title: '库存报表', path: '/reports/inventory', icon: 'Box' },
        { id: 'financial-reports', title: '财务报表', path: '/reports/financial', icon: 'Money' },
        { id: 'member-reports', title: '会员报表', path: '/reports/member', icon: 'User' }
      ]
    }
  ],
  system: [
    {
      id: 'system-settings',
      title: '系统设置',
      items: [
        { id: 'user-management', title: '用户管理', path: '/system/users', icon: 'User' },
        { id: 'role-management', title: '角色管理', path: '/system/roles', icon: 'Key' },
        { id: 'permission-management', title: '权限管理', path: '/system/permissions', icon: 'Lock' },
        { id: 'system-config', title: '系统配置', path: '/system/config', icon: 'Setting' },
        { id: 'data-backup', title: '数据备份', path: '/system/backup', icon: 'Download' },
        { id: 'system-logs', title: '系统日志', path: '/system/logs', icon: 'Document' }
      ]
    }
  ],
  auth: [
    {
      id: 'authorization',
      title: '授权管理',
      items: [
        { id: 'license-management', title: '许可证管理', path: '/auth/license', icon: 'Key' },
        { id: 'api-management', title: 'API管理', path: '/auth/api', icon: 'Connection' },
        { id: 'oauth-settings', title: 'OAuth设置', path: '/auth/oauth', icon: 'Lock' }
      ]
    }
  ]
}

// 收藏夹数据
const favoriteItems = ref([
  { id: 1, title: '数据概览', path: '/dashboard', icon: 'DataAnalysis' },
  { id: 2, title: '销售订单', path: '/sales/orders', icon: 'Document' },
  { id: 3, title: '库存查询', path: '/inventory/stock', icon: 'Box' }
])

// 搜索相关
const searchResults = ref([])

// 计算属性
const activeMainMenuTitle = computed(() => {
  const item = mainMenuItems.value.find(item => item.id === activeMainMenu.value)
  return item?.title || ''
})

const subMenuColumns = computed(() => {
  if (currentSubMenus.value.length === 0) return []
  
  // 将子菜单分成3列
  const columnCount = 3
  const itemsPerColumn = Math.ceil(currentSubMenus.value.length / columnCount)
  const columns = []
  
  for (let i = 0; i < columnCount; i++) {
    const start = i * itemsPerColumn
    const end = start + itemsPerColumn
    columns.push(currentSubMenus.value.slice(start, end))
  }
  
  return columns
})

const breadcrumbs = computed(() => {
  const pathSegments = route.path.split('/').filter(Boolean)
  const breadcrumbs = [{ title: '首页', path: '/' }]
  
  let currentPath = ''
  pathSegments.forEach(segment => {
    currentPath += `/${segment}`
    breadcrumbs.push({
      title: segment.charAt(0).toUpperCase() + segment.slice(1),
      path: currentPath
    })
  })
  
  return breadcrumbs
})

// 方法
const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value
  if (isCollapsed.value) {
    currentSubMenus.value = []
    activeMainMenu.value = ''
  }
}

const selectMainMenu = (item) => {
  activeMainMenu.value = item.id
  const menuData = subMenuData.value
  if (menuData && menuData[item.id]) {
    currentSubMenus.value = menuData[item.id]
  } else {
    currentSubMenus.value = []
  }
  console.log('选择主菜单:', item)
  console.log('子菜单数据:', menuData[item.id])
  console.log('当前子菜单:', currentSubMenus.value)
  console.log('子菜单列数:', subMenuColumns.value)
  console.log('是否折叠:', isCollapsed.value)
}

const closeSubMenu = () => {
  currentSubMenus.value = []
  activeMainMenu.value = ''
}

const navigateTo = (path) => {
  router.push(path)
}

const navigateToSubMenu = (path) => {
  router.push(path)
  // 导航后自动关闭子菜单
  closeSubMenu()
}

const navigateToResult = (result) => {
  router.push(result.path)
  showSearchResults.value = false
  searchQuery.value = ''
}

const handleSearch = () => {
  if (!searchQuery.value.trim()) {
    searchResults.value = []
    return
  }
  
  // 模拟搜索
  const allItems = []
  Object.values(subMenuData).forEach(categories => {
    categories.forEach(category => {
      category.items.forEach(item => {
        allItems.push({
          id: item.id,
          title: item.title,
          path: item.path,
          icon: item.icon
        })
      })
    })
  })
  
  searchResults.value = allItems.filter(item => 
    item.title.toLowerCase().includes(searchQuery.value.toLowerCase())
  ).slice(0, 10)
}

const hideSearchResults = () => {
  setTimeout(() => {
    showSearchResults.value = false
  }, 200)
}

const showNavigationSettings = () => {
  // 触发导航设置对话框
  window.dispatchEvent(new CustomEvent('show-navigation-settings'))
}

// 生命周期
onMounted(() => {
  // 根据当前路由设置活动菜单
  const currentPath = route.path
  const menuData = subMenuData.value
  if (menuData && typeof menuData === 'object') {
    for (const [menuId, categories] of Object.entries(menuData)) {
      if (Array.isArray(categories)) {
        for (const category of categories) {
          if (category && category.items && Array.isArray(category.items)) {
            for (const item of category.items) {
              if (currentPath.startsWith(item.path)) {
                activeMainMenu.value = menuId
                currentSubMenus.value = categories
                break
              }
            }
          }
        }
      }
    }
  }
})

// 监听搜索输入
watch(searchQuery, handleSearch)
</script>

<style scoped>
.smart-navigation-system {
  display: flex;
  height: 100vh;
  background: #f5f7fa;
  width: 100%;
  max-width: 100vw;
  overflow: hidden;
  box-sizing: border-box;
}

/* 左侧主导航 */
.main-nav-sidebar {
  width: 280px;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  overflow: hidden;
  position: relative;
  z-index: 100;
  flex-shrink: 0; /* 防止收缩 */
  box-sizing: border-box;
}

.main-nav-sidebar.collapsed {
  width: 60px;
}

.logo-section {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  border-bottom: 1px solid #e4e7ed;
}

.logo {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #409eff;
}

.collapse-btn {
  color: #606266;
}

.search-section {
  padding: 16px;
  position: relative;
}

.search-results {
  position: absolute;
  top: 100%;
  left: 16px;
  right: 16px;
  background: white;
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  max-height: 300px;
  overflow-y: auto;
}

.search-result-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  cursor: pointer;
  transition: background-color 0.2s;
}

.search-result-item:hover {
  background: #f5f7fa;
}

.main-menu {
  flex: 1;
  padding: 8px 0;
}

.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.menu-item:hover {
  background: #f5f7fa;
}

.menu-item.active {
  background: #409eff;
  color: white;
}

.menu-item.active .menu-icon {
  color: white;
}

.menu-icon {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #606266;
}

.menu-text {
  flex: 1;
  font-size: 14px;
}

.menu-badge {
  margin-left: auto;
}

.favorites-section {
  padding: 16px;
  border-top: 1px solid #e4e7ed;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: #909399;
  margin-bottom: 12px;
}

.favorites-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.favorite-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.2s;
  font-size: 13px;
}

.favorite-item:hover {
  background: #f5f7fa;
}

/* 浮动子菜单面板 */
.sub-menu-panel {
  position: fixed;
  top: 0;
  left: 280px; /* 主菜单宽度 */
  width: min(600px, calc(100vw - 280px - 20px)); /* 限制最大宽度，留出边距 */
  height: 100vh;
  background: white;
  border-right: 1px solid #e4e7ed;
  display: flex;
  flex-direction: column;
  z-index: 200;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.1);
  animation: slideInRight 0.3s ease;
}

.sub-menu-header {
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #e4e7ed;
  background: #fafafa;
}

.sub-menu-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #303133;
}

.sub-menu-content {
  flex: 1;
  padding: 20px;
  display: flex;
  gap: 20px;
  overflow-y: auto;
}

.sub-menu-column {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.sub-menu-category {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.category-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  padding-bottom: 8px;
  border-bottom: 1px solid #e4e7ed;
}

.category-items {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sub-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 13px;
}

.sub-menu-item:hover {
  background: #f5f7fa;
  color: #409eff;
}

/* 主内容区域 */
.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
  min-width: 0; /* 确保内容可以收缩 */
  margin-left: 0; /* 默认不缩进 */
  overflow-x: hidden; /* 防止水平滚动 */
  width: 100%; /* 占满可用宽度 */
}

.main-content.expanded {
  margin-left: 0;
  width: 100%;
}

.top-toolbar {
  height: 60px;
  background: white;
  border-bottom: 1px solid #e4e7ed;
  display: flex;
  align-items: center;
  padding: 0 20px;
  gap: 20px;
}

.toolbar-left {
  display: flex;
  align-items: center;
  gap: 16px;
}

.toolbar-center {
  flex: 1;
  max-width: 400px;
}

.toolbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

.notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 4px;
  transition: background-color 0.2s;
}

.user-info:hover {
  background: #f5f7fa;
}

.content-area {
  flex: 1;
  padding: 20px;
  overflow-y: auto;
  background: #f5f7fa;
  min-width: 0; /* 确保内容可以收缩 */
  width: 100%; /* 确保占满可用宽度 */
}

/* 动画 */
.search-dropdown-enter-active,
.search-dropdown-leave-active {
  transition: all 0.2s ease;
}

/* 子菜单动画 */
@keyframes slideInRight {
  from {
    transform: translateX(-20px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.search-dropdown-enter-from {
  opacity: 0;
  transform: translateY(-10px);
}

.search-dropdown-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

.page-fade-enter-active,
.page-fade-leave-active {
  transition: all 0.3s ease;
}

.page-fade-enter-from {
  opacity: 0;
  transform: translateY(10px);
}

.page-fade-leave-to {
  opacity: 0;
  transform: translateY(-10px);
}

/* 响应式 */
@media (max-width: 1200px) {
  .sub-menu-panel {
    width: min(700px, calc(100vw - 280px));
  }
}

@media (max-width: 768px) {
  .main-nav-sidebar {
    position: fixed;
    z-index: 1000;
    height: 100vh;
  }
  
  .main-nav-sidebar.collapsed {
    transform: translateX(-100%);
  }
  
  .sub-menu-panel {
    width: 100%;
    left: 0;
    top: 0;
  }
  
  .main-content {
    margin-left: 0;
  }
  
  .toolbar-center {
    display: none;
  }
  
  .sub-menu-content {
    flex-direction: column;
    gap: 16px;
  }
  
  .sub-menu-column {
    flex: none;
  }
}

/* 暗黑模式支持 */
.dark .smart-navigation-system {
  background: #141414;
}

.dark .main-nav-sidebar {
  background: #1f1f1f;
  border-color: #3a3a3a;
}

.dark .sub-menu-panel {
  background: #1f1f1f;
  border-color: #3a3a3a;
  box-shadow: 4px 0 12px rgba(0, 0, 0, 0.3);
}

.dark .top-toolbar {
  background: #1f1f1f;
  border-color: #3a3a3a;
}

.dark .content-area {
  background: #141414;
}

.dark .menu-item:hover {
  background: #2a2a2a;
}

.dark .sub-menu-item:hover {
  background: #2a2a2a;
}

.dark .search-results {
  background: #1f1f1f;
  border-color: #3a3a3a;
}

.dark .search-result-item:hover {
  background: #2a2a2a;
}
</style>
